<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-input v-model="ser.company_name" placeholder="请输入用户名称"></el-input>
      </el-col>
      <el-col :span="20">
        <el-button @click="company_name_click" icon="el-icon-search" class="add_btn"> 搜索</el-button>
        <el-button @click="company_name_clicks" icon="el-icon-refresh" class="add_btn"> 重置</el-button>
        <el-button @click="add_user" v-permission="'system:users:add'" icon="el-icon-plus" class="add_btn">新增用户</el-button>
      </el-col>
    </el-row>

    <el-table :data="dataList" stripe style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="80">
      </el-table-column>
      <el-table-column prop="company_name" label="用户名称">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column prop="username" label="账号">
      </el-table-column>
      <el-table-column prop="password" label="密码">
      </el-table-column>
      <el-table-column label="角色">
        <template slot-scope="scope">
          <span>{{ scope.row.role[0].name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否主账号">
        <template slot-scope="scope">
          <span>{{ scope.row.is_primary == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="set_user(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
          <!-- <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
            title="是否删除这条数据？" @confirm="del_product(scope.row)">
            <el-button slot="reference" type="text" icon="el-icon-delete"> 删除</el-button>
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click='prev'
        @next-click='next' :current-page.sync="pagination.page" :page-size="pagination.per_page"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>


    <!-- 新增/修改管理员 -->
    <el-dialog :title="user_title" :visible.sync="admin_box" width="30%" @close="dialog_click"
      :close-on-click-modal='false'>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="用户名称" prop="company_names">
          <el-input v-model="ruleForm.company_names" @input="changeValue"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phones">
          <el-input v-model="ruleForm.phones" @input="changeValue"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="usernames">
          <el-input v-model="ruleForm.usernames" @input="changeValue"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passwords">
          <el-input v-model="ruleForm.passwords" @input="changeValue"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roles_id">
          <el-select v-model="ruleForm.roles_id" placeholder="请选择角色" @change="changeValue">
            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对应经销商" v-if="ruleForm.roles_id==4">
          <el-select v-model="ruleForm.customer_id" filterable  placeholder="请选择经销商">
            <el-option v-for="item in CustomerList" :key="item.id" :label="item.customer_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否主账号" v-if="role_name == '超级管理员'">
          <el-radio-group v-model="ruleForm.is_primary">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="admin_box = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, getRoleList, createUser } from '@/api/role/index'
import {
  getCustomerList,
} from "@/api/product/index";
export default {
  data() {
    return {
      ser: {
        company_name: '',
      },
      isset: false,
      admin_box: false,
      roleList: [],
      ruleForm: {
        id: '',
        is_primary: 0,
        customer_id:"",
        usernames: '',
        passwords: '',
        phones: '',
        company_names: '',
        roles_id: '',
      },
      rules: {
        usernames: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ],
        passwords: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        phones: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }
        ],
        company_names: [
          {
            required: true,
            message: '请输入用户名称',
            trigger: 'blur'
          }
        ],
        roles_id: [
          {
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }
        ],
      },
      user_title: '',
      dataList: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      role_name: this.$store.getters.userInfo.role_name,
      CustomerList:[]
    }
  },
  async mounted() {
    try {
      await this.getlist()
    } catch (error) {
      console.error('加载数据失败:', error)
    }
  },
  methods: {
    get_CustomerList() {
      getCustomerList({ is_simple:1 }).then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data;
        }
      });
    },
    async getrole() {
      const res = await getRoleList()
      if (res.code === 200) {
        this.roleList = res.data.data
      } else {
        throw new Error(res.message)
      }
    },
    async getlist() {
      const res = await getUserList({...this.pagination, ...this.ser})
      if (res.code === 200) {
        this.dataList = res.data.data
        this.total = res.data.total
      } else {
        throw new Error(res.message)
      }
    },
    company_name_click() {
      getUserList(this.ser).then(res => {
        if (res.code == 200) {
          this.dataList = res.data.data
          this.total = res.data.total
        }
      })
    },
    company_name_clicks() {
      this.ser.company_name = ''
      getUserList(this.pagination).then(res => {
        if (res.code == 200) {
          this.dataList = res.data.data
          this.total = res.data.total
        }
      })
    },

    handleSizeChange(val) {
      console.log(val)
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val
      this.getlist()
    },
    prev() {
      this.pagination.page = this.pagination.page - 1
      this.getlist()
    },
    next() {
      console.log('ss')
      this.pagination.page = this.pagination.page + 1
      this.getlist()
    },
    dialog_click() {
      console.log('222')

      this.ruleForm = {
        id: '',
        usernames: '',
        customer_id:"",
        passwords: '',
        phones: '',
        company_names: '',
        roles_id: '',
      }
      this.$nextTick()
      this.isset = false
    },
    add_user() {
      this.get_CustomerList()
      this.getrole()
      this.admin_box = true
      this.user_title = '新增用户'
    },
    set_user(row) {
      console.log(row)
      // debugger
      this.admin_box = true
      this.user_title = '修改用户'
      this.ruleForm = row
      this.ruleForm.id = row.id
      this.ruleForm.roles_id = row.role[0].id
      this.ruleForm.customer_id= row.customer_id
      this.ruleForm.usernames = row.username
      this.ruleForm.passwords = row.password
      this.ruleForm.phones = row.phone
      this.ruleForm.company_names = row.company_name
      this.ruleForm.is_primary = row.is_primary ? row.is_primary : 0
      this.isset = true
      this.get_CustomerList()
      this.getrole()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createUser(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.admin_box = false
              this.$message.success('提交成功')
              this.getlist()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    changeValue() {
      this.$forceUpdate()
    }

  },

}

</script>

<style></style>
